<template>
  <div class="baoguan-main-con">
    <el-dialog
  title="爆管预案"
  :visible.sync="dialogVisible"
  width="50%"  center :modal="false" :close-on-click-modal="false"
 
  >
  <div class="dialog_warpper">
    <div ref="file" id="file"></div>
    <div class="btns"><button  @click="exportWordFile(true)">文件下载</button></div>
  </div>
  </el-dialog>
    <div class="baoguan_title">
      <span @click="ceshi">爆管预演</span>
      <!-- <span @click="ceshi1">爆管分析</span> -->

    </div>
    <div class="tootipText">
      <div class="tooltipbg"></div>
      <span>请在在管线上标记爆管点</span>
    </div>
    <!-- <div class="baoguan_form">
      <button @click="bgfxstart">标记事故点</button>
      <button @click="bgfxend">清除事故点</button>
      <button @click="getData">分析</button>
    </div> -->
    <div class="btnGroup">
      <div
        :class="[isBiaojiActive ? 'handleBtnActive' : 'handleBtnUnactive']"
        @click="bgfxstart"
      >
        <span>标记事故点</span>
      </div>
      <div class="handleBtnUnactive" @click="bgfxend">
        <span>清除事故点</span>
      </div>
    </div>

    <div v-for="(item, i) in lonlat" :key="i" class="choseGuanXianResult">
      <span>{{ item.properties.name }}</span>
      <div class="deleteResult" @click="deletedata(i)"></div>
      <!-- <button @click="deletedata(i)">删除</button> <br> -->
    </div>

   
    <div class="divBox">
     
    <div class="doAnalysis" @click="getDatayuan" v-show="dataline.length > 0">
      <span>爆管预案</span>
    </div>
    <div class="doAnalysis" @click="getData" v-show="lonlat.length > 0">
        <span>分析</span> 
    </div>
    </div>
  

    <div class="baoguan_result" v-show="isShowResult">
      <!-- <div class="baoguan_result_line" v-show="lonlat.length > 0"></div> -->
      <div class="baoguan_result_title">
        <span>查询结果</span>
      </div>
      <!-- <div style="color: #ffffff;"> -->
      <!-- <ul v-for="(item,i) in gffxdata" :key="i">
          <li>{{item}}</li>
        </ul> -->
      <!-- <div class="baoGuanResultItem" v-for="(item,i) in gffxdata" :key="i">
          <div v-for="(it,key,index) in nameList" :key="index" class="result-item-text">
            <span class="itemText">{{it}}:</span>
            <span class="itemText">{{item[key]}}</span>
          </div>
        </div> -->
      <!-- </div> -->
      <div class="resultContent">
        <div class="resultTabs">
          <div
            class="guanxianResult"
            :class="resultType == '0' ? 'resultActive' : ''"
            @click="handleClickResult('0')"
          >
            影响管线
          </div>
          <div
            class="jiancedianResult"
            :class="resultType == '1' ? 'resultActive' : ''"
            @click="handleClickResult('1')"
          >
            关闭阀门
          </div>
          <div
            class="jiancedianResult"
            :class="resultType == '2' ? 'resultActive' : ''"
            @click="handleClickResult('2')"
          >
            影响区域
          </div>
        </div>

        <div class="guanxianList" v-show="resultType == '0'">
          <div class="resultItemContent">
            <div class="resultItem" v-for="(item, i) in dataline" :key="i">
              <span>{{ i }}.{{ item.name }} </span>
            </div>
          </div>
        </div>
        <div class="jiancedianList" v-show="resultType == '1'">
          <div class="resultItemContent">
            <div class="resultItem" 
              <span> 0 .编号:{{ datapoint.address }} </span>
            </div>
          </div>
        </div>
        <div class="YingXiangQuYuList" v-show="resultType == '2'">
          <div class="resultItemContent">
            <el-table
              :data="tableData"
              style="width: 100%"
              height="380"
              row-key="code"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <template slot="empty">
                <div>
                  当前管线暂未关联覆盖范围无法统计覆盖区信息，请关联后再试
                </div>
              </template>
              <el-table-column prop="full_name" label="村社名称" width="200">
              </el-table-column>
              <el-table-column prop="region_name" label="社名" width="150">
              </el-table-column>
              <el-table-column prop="house_num" label="村社户数" width="80">
              </el-table-column>
              <el-table-column prop="person_num" label="村社人数">
              </el-table-column>
            </el-table>
            <!-- <div class="resultItem" v-for="(item,i) in datapoint" :key="i">
              <span>{{i}}.{{item}} </span>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    </div>
  
</template>

<script>
import Bus from "@/js/EventBus";
import { getburstAnalysisData, getBoxLineData, getgffxData } from "@/api/http";
import { getYingXiangQuYuList,receiveOrderByUser,getBurstLevelOne } from "@/api/apiPOI";

import {ExportBriefDataDocx,getBase64Sync} from '@/js/outword.js'
import axios from 'axios'
let docx = require('docx-preview');
export default {
  name: "BaoGuanAnalysis",
  components: {},
  computed: {
    tableDataLength() {
      return this.tableData.length > 0;
    },
  },
  data() {
    return {
      resultType: 0,
      dataline: [],
      datapoint: [],
      valueMultiple: [],
      gffxdata: [],
      lonlat: [],
      nameList: {
        loc: "安装地址",
        mnf: "监测频次",
        // "device_id": "621102061",
        // "lon": 104.702145,
        install_da: "安装日期",
        // "run": "0",
        // "sttp": "1",
        // "geom": { "type": "geometry", "value": "0101000020E6100000320395F1EF2C5A4027FA7C9411E14140" },
        // "type": "3",
        // "address_na": "GJC2-1",
        // "iskd": "0",
        address__1: "测站名称",
        install_ma: "安装负责人",
        // "data_state": "1",
        // "issp": "1",
        // "id": 196,
        // "ylblc": 1.6,
        // "addr_id": "de6c7c29d645420a88d40efb2bf5ce30",
        // "lat": 35.758349,
        // "ts": 1662566400000,
        // "register": "0"
      },
      isBiaojiActive: false,
      isShowResult: false,
      tableData: [],
      dialogVisible: false,
      Village_Community:'',
      Pipeline:'',
      valve:'',
      mechanism:'安定区',
      nowtime:"",
      listname:'爆管预案',
      currentTime: "",
      currentDate: "",
      currentWeek: "",
      timer: null,
    
    }
  },
  mounted() {
    let _this = this;
    this.timer = setInterval(() => {
      _this.getCurrentDateTime();
    }, 1000);
    Bus.$on("bgfxid", (e) => {
      // console.log(e);
      // this.clearAllDrawn();
      // this.getData(e);
      this.searchIdData(e);
    });
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },
  methods: {
    _formatWeek(day) {
      const dayWeekMap = {
        1: "星期一",
        2: "星期二",
        3: "星期三",
        4: "星期四",
        5: "星期五",
        6: "星期六",
        0: "星期日",
      };

      return dayWeekMap[day];
    },

    getCurrentDateTime() {
      const _this = this;
      //时间数字小于10，则在之前加个“0”补位。
      function check(i) {
        var num;
        i < 10 ? (num = "0" + i) : (num = i);
        // i < 10 ? num =  i : num = i;
        return num;
      }

      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1; //getMonth()获取的是0-11月份，要+1
      let day = time.getDate();
      let nowDayOfWeek = time.getDay(); //今天本周的第几天

      //获取时分秒

      let h = time.getHours();
      let m = time.getMinutes();
      let s = time.getSeconds();

      //检查是否小于10
      h = check(h);
      m = check(m);
      s = check(s);
      // 带年份
      // this.currentDate = `${year}-${month}-${check(day)}`
      this.currentDate = `${year}年${check(month)}月${check(day)}日`;
      this.currentTime = `${h} : ${m} : ${s}`;
      this.currentWeek = _this._formatWeek(nowDayOfWeek);
      this.nowtime= this.currentDate
    },
    async exportWordFile (type){
			 let  data= {
				Village_Community:this.Village_Community,
				Pipeline:this.Pipeline,
				valve:this.valve,
				mechanism:this.mechanism,
        nowtime:this.nowtime
			}
ExportBriefDataDocx("/爆管预案.docx", data, `${this.listname}.docx`, type);
	      }	,
    async ceshi(){
      const res=await getBurstLevelOne({account:'iBxT8OW3Tjqes8yuvqyCbg=='})
      console.log(res,"res测试")
    },
    async ceshi1(){
      const res=await receiveOrderByUser({account:'iBxT8OW3Tjqes8yuvqyCbg==',id:'d2f4af4adb64499084ffb7891d11a210'})
      console.log(res,"res1测试")
    },
    async searchIdData(id) {
      let ID = JSON.parse(id);
      const res = await getBoxLineData(`UserID='${ID.UserID}'`);
      this.lonlat.push(res.features[0]);
      // console.log(res, id, "=====================================")
    },
    handleClickResult(value) {
// let that=this
      this.resultType = value;
      // if ("2" == value) {
    

        // let codeArray = this.dataline.map((item) => {
        //   return item.userId;
        // });
        // getYingXiangQuYuList({ code: codeArray.toString() }).then((res) => {
        //   let paramType = (value, type) =>
        //     Object.prototype.toString.call(value).includes(type);
        //   if (paramType(res, "Object")) {
        //     this.tableData = res.data;
        //     console.log(this.tableData)
        //            let arr=[]
        //     res.data.forEach(element => {
        //       arr.push(element.full_name)
        //       element.children.forEach(e => {
        //         arr.push(e.full_name)
        //       });
        //     });
        //     that.Village_Community=arr+''
        //   }
        // });
      // }
    },
    deletedata(i) {
      // console.log(this.lonlat[i])
      let id = this.lonlat[i].properties.UserID;
      Bus.$emit("removelinecolor", id);
      this.lonlat.splice(i, 1);
    },
    bgfxstart() {
      this.isBiaojiActive = true;
      Bus.$emit("bgfx", true);
    },
    bgfxend() {
      Bus.$emit("bgfx", false);
      Bus.$emit("removepoint", false);
      Bus.$emit("removeyxqu", false);

      this.tableData = [];
      this.gffxdata = [];
      this.lonlat = [];
      this.datapoint = [];
      this.dataline = [];
      this.isBiaojiActive = false;
      this.isShowResult = false;
    },
    async getData() {
      // alert(e)
      let that=this
      if (this.lonlat.length == 1) {
        let params = [];
        this.lonlat.forEach((element) => {
          params.push(element.properties.source);
        });
        console.log(params, "params");
      

        const { data: res } = await getburstAnalysisData(params.flat());
        console.log(res, "res======++++++++++++++================");
        if (!res) {
          return;
        }
    

        this.datapoint=res
        this.dataline=res.lines
        this.valve=res.address
        let arr=[]
        res.lines.forEach(element => {
          arr.push(element.name)
        });
        
const newArr = Array.from(new Set(arr))
        this.Pipeline=newArr+''
        let codeArray = this.dataline.map((item) => {
          return item.userId;
        });
        getYingXiangQuYuList({ code: codeArray.toString() }).then((res) => {
          let paramType = (value, type) =>
            Object.prototype.toString.call(value).includes(type);
          if (paramType(res, "Object")) {
            this.tableData = res.data;
            // console.log(this.tableData)
                   let arr=[]
            res.data.forEach(element => {
              arr.push(element.full_name)
              // element.children.forEach(e => {
              //   arr.push(e.full_name)
              // });
            });
            that.Village_Community=arr+''
          }
        });
        // // console.log(this.datapoint);
        // this.dataline = res3;
            let arrid=[]
        this.dataline.forEach((element) => {
          // console.log(this.lonlat[0].properties.UserID)
          if (element.userId != this.lonlat[0].properties.UserID) {
            let idData = {
              UserID: element.userId
,
            };
            Bus.$emit("addlinecolor", JSON.stringify(idData));
            arrid.push(JSON.stringify(idData))
          }
        });
        Bus.$emit("selectyxqu", arrid);
        let idData = {
          deviceId: this.datapoint.deviceId,
        };
        Bus.$emit("addpoint", JSON.stringify(idData));
        Bus.$emit("dingwei", [this.datapoint.x, this.datapoint.y,15000]);
        this.isShowResult = true;
      } else {
        this.$Message.error("请选择正确的管段（长度为1）");
        // alert('shujuchangdubuwei2')
      }
    },
    getDatayuan(){
      this.dialogVisible=true
      this.exportWordFile()
    }
  },
};
</script>

<style lang="scss" scoped>
.baoguan-main-con {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 301px;
  height: 712px;
  background: url("../../assets/rightMenu/selectInfo/selectInfo_bg.png");
  background-size: 100% 100%;
}

.baoguan_title {
  width: 280px;
  height: 35px;
  box-sizing: border-box;
  background: url("@/assets/panelTree/dtml_bg_title.png") no-repeat;
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  background-size: 100% 100%;
  text-align: left;
  padding-left: 50px;
  line-height: 34px;
  // background-color: red;
  margin: 10px 0 0 10px;
}

.baoguan_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #c8e9ff;
}

.baoguan_result_title {
  width: 300px;
  height: 16px;
  background: url("../../assets/rightMenu/selectInfo/monitor_form_title.png")
    0px 2px no-repeat;
  text-align: center;
  color: #00baff;
  margin: 10px 0;
}

.baoguan_result_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  line-height: 12px;
}

.baoguan_result {
  flex: 1;
  margin-top: 10px;
}

.baoguan_result_line {
  width: 289px;
  height: 1px;
  background: url(../../assets/rightMenu/selectInfo/boundary_line.png);
  background-size: 100% 100%;
  margin-bottom: 20px;
}

.handleBtnActive {
  width: 100px;
  height: 28px;
  background: url(../../assets/panelTree/btn-check.png);
  text-align: center;
  margin: 10px 0 0 10px;
  cursor: pointer;

  span {
    font-family: SourceHanSansCN-Medium;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 1px;
    color: #00baff;
  }
}

.handleBtnUnactive {
  width: 100px;
  height: 28px;
  background: url(../../assets/panelTree/btn-uncheck.png);
  text-align: center;
  margin: 10px 0 0 10px;
  cursor: pointer;

  span {
    font-family: SourceHanSansCN-Medium;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 1px;
    color: #ffffff;
  }
}

::v-deep {
  .el-form-item__label {
    font-family: SourceHanSansCN-Regular !important;
    font-size: 12px !important;
    line-height: 44px !important;
    color: #daf0ff !important;
    padding: 0 0 0 16px !important;
  }
}

.resultContent {
  .resultTabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 18px 0;
  }

  .guanxianResult,
  .jiancedianResult {
    font-family: SourceHanSansCN-Medium;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0px;
    width: auto;
    text-align: center;
    margin: 0 10px;
    color: #c9e9ff;
  }

  .resultActive {
    border-bottom: solid 2px #00baff;
    color: #00baff;
  }

  .guanxianList,
  .jiancedianList,
  .YingXiangQuYuList {
    padding-left: 20px;
    overflow-y: auto;
    height: 400px;
    margin-right: 10px;

    .resultItemContent {
      .resultItem {
        cursor: pointer;
      }

      span {
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 28px;
        letter-spacing: 1px;
        color: #95b0c2;
      }
    }

    &::-webkit-scrollbar {
      width: 4px;
      height: 1px;
      background: rgba(9, 85, 133, 0.8);
      display: block;
      border-radius: 3px;
    }

    /*滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #052149;
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
      border-radius: 3px;
      background: transparent;
    }
  }
}

.choseGuanXianResult {
  margin: 12px 30px 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  span {
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #daf0ff;
  }

  div {
    width: 13px;
    height: 17px;
    background: url(../../assets/panelTree/delete.png);
    // margin: 0 20px 0 10px;
  }
}

.baoGuanResultItem {
  width: 200px;

  .result-item-text {
    height: 18px;
    display: flex;
    justify-content: flex-start;

    span:nth-child(2n + 1) {
      width: 80px;
      text-align: right;
      font-family: SourceHanSansCN-Regular;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 0px;
      color: #daf0ff;
      padding-right: 6px;
      // background-color: green;
    }

    span:nth-child(2n) {
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 18px;
      letter-spacing: 0px;
      color: #00baff;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 80px;
    }
  }
}

.btnGroup {
  display: flex;
  justify-content: space-around;
  align-items: center;
  // padding: 20px 20px 10px 20px;
  text-align: center;

  .handleBtn,
  .clearResult {
    width: 100px;
    height: 28px;
    background: url(../../assets/panelTree/btn-uncheck.png);
    text-align: center;
    margin: 10px 0 0 10px;
    cursor: pointer;
  }
}
.divBox{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.doAnalysis {
  width: 90px;
  height: 26px;
  border-radius: 2px;
  border: solid 2px #094f91;
  text-align: center;
  // margin-left: 180px;
  margin-top: 20px;
  cursor: pointer;

  span {
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #c9e9ff;
  }
}

.tootipText {
  display: flex;
  flex-direction: row;
  padding: 10px 20px 0 20px;
  align-items: center;

  .tooltipbg {
    width: 16px;
    height: 16px;
    background: url("@/assets//panelTree/tooltip.png");
    margin-right: 10px;
    background-size: 98% 98%;
  }

  span {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 1px;
    color: #95b0c2;
  }
}
.baoguan-main-con /deep/ .el-dialog{
  margin-top: 0 !important;
}
.btns{
  position: absolute;
  top: 56px;
  right: 24px;
}
</style>
